<template>
  <div class="comparison-chart">
    <svg class="chart-svg" viewBox="0 0 489 280" xmlns="http://www.w3.org/2000/svg">
      <!-- 背景 -->
      <rect width="100%" height="100%" fill="#fafafa"/>
      
      <!-- 图表标题 -->
      <text x="245" y="25" text-anchor="middle" font-size="14" font-weight="600" fill="#374151">
        区域压力状态对比
      </text>
      
      <!-- Y轴标签 -->
      <g class="y-axis">
        <text x="30" y="60" text-anchor="end" font-size="12" fill="#6b7280">100%</text>
        <text x="30" y="100" text-anchor="end" font-size="12" fill="#6b7280">75%</text>
        <text x="30" y="140" text-anchor="end" font-size="12" fill="#6b7280">50%</text>
        <text x="30" y="180" text-anchor="end" font-size="12" fill="#6b7280">25%</text>
        <text x="30" y="220" text-anchor="end" font-size="12" fill="#6b7280">0%</text>
      </g>
      
      <!-- 网格线 -->
      <g class="grid-lines" stroke="#e5e7eb" stroke-width="0.5">
        <line x1="40" y1="60" x2="450" y2="60"/>
        <line x1="40" y1="100" x2="450" y2="100"/>
        <line x1="40" y1="140" x2="450" y2="140"/>
        <line x1="40" y1="180" x2="450" y2="180"/>
        <line x1="40" y1="220" x2="450" y2="220"/>
      </g>
      
      <!-- 柱状图 -->
      <g class="bars">
        <g v-for="(area, index) in chartData" :key="area.name" :transform="`translate(${60 + index * 130}, 0)`">
          <!-- 正常状态柱 -->
          <rect 
            x="0" 
            :y="220 - area.normalHeight" 
            width="30" 
            :height="area.normalHeight"
            fill="#52C41A"
            rx="2"
          />
          
          <!-- 注意状态柱 -->
          <rect 
            x="35" 
            :y="220 - area.warningHeight" 
            width="30" 
            :height="area.warningHeight"
            fill="#FAAD14"
            rx="2"
          />
          
          <!-- 异常状态柱 -->
          <rect 
            x="70" 
            :y="220 - area.criticalHeight" 
            width="30" 
            :height="area.criticalHeight"
            fill="#FF4D4F"
            rx="2"
          />
          
          <!-- 数值标签 -->
          <text 
            x="15" 
            :y="215 - area.normalHeight" 
            text-anchor="middle" 
            font-size="10" 
            fill="white"
            v-if="area.normalHeight > 15"
          >
            {{ area.normal }}
          </text>
          <text 
            x="50" 
            :y="215 - area.warningHeight" 
            text-anchor="middle" 
            font-size="10" 
            fill="white"
            v-if="area.warningHeight > 15"
          >
            {{ area.warning }}
          </text>
          <text 
            x="85" 
            :y="215 - area.criticalHeight" 
            text-anchor="middle" 
            font-size="10" 
            fill="white"
            v-if="area.criticalHeight > 15"
          >
            {{ area.critical }}
          </text>
          
          <!-- X轴标签 -->
          <text x="50" y="240" text-anchor="middle" font-size="12" fill="#374151">
            {{ area.name }}
          </text>
        </g>
      </g>
      
      <!-- 图例 -->
      <g class="legend" transform="translate(350, 45)">
        <rect x="0" y="0" width="12" height="12" fill="#52C41A" rx="2"/>
        <text x="18" y="10" font-size="11" fill="#374151">正常</text>
        
        <rect x="0" y="20" width="12" height="12" fill="#FAAD14" rx="2"/>
        <text x="18" y="30" font-size="11" fill="#374151">注意</text>
        
        <rect x="0" y="40" width="12" height="12" fill="#FF4D4F" rx="2"/>
        <text x="18" y="50" font-size="11" fill="#374151">异常</text>
      </g>
    </svg>
    
    <!-- 统计信息 -->
    <div class="chart-stats">
      <div class="stat-item" v-for="area in data" :key="area.area">
        <div class="stat-header">
          <span class="area-name">{{ area.area }}</span>
          <span class="total-count">{{ area.normal + area.warning + area.critical }}台</span>
        </div>
        <div class="stat-bars">
          <div class="stat-bar">
            <div class="bar-segment normal" :style="{ width: getPercentage(area.normal, area) + '%' }"></div>
            <div class="bar-segment warning" :style="{ width: getPercentage(area.warning, area) + '%' }"></div>
            <div class="bar-segment critical" :style="{ width: getPercentage(area.critical, area) + '%' }"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ComparisonChart',
  props: {
    data: {
      type: Array,
      default: () => [
        { area: '区域A', normal: 85, warning: 12, critical: 3 },
        { area: '区域B', normal: 78, warning: 18, critical: 4 },
        { area: '区域C', normal: 92, warning: 6, critical: 2 }
      ]
    }
  },
  computed: {
    chartData() {
      return this.data.map(area => {
        const total = area.normal + area.warning + area.critical
        const maxHeight = 160 // 最大柱高度
        
        return {
          name: area.area,
          normal: area.normal,
          warning: area.warning,
          critical: area.critical,
          normalHeight: (area.normal / total) * maxHeight,
          warningHeight: (area.warning / total) * maxHeight,
          criticalHeight: (area.critical / total) * maxHeight
        }
      })
    }
  },
  methods: {
    getPercentage(value, area) {
      const total = area.normal + area.warning + area.critical
      return ((value / total) * 100).toFixed(1)
    }
  }
}
</script>

<style scoped>
.comparison-chart {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chart-svg {
  width: 100%;
  height: 280px;
  background: transparent;
}

.chart-stats {
  margin-top: 16px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stat-item {
  background: #f9fafb;
  border-radius: 6px;
  padding: 12px;
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.area-name {
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

.total-count {
  font-size: 12px;
  color: #6b7280;
}

.stat-bars {
  width: 100%;
}

.stat-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: #e5e7eb;
}

.bar-segment {
  height: 100%;
  transition: width 0.3s ease;
}

.bar-segment.normal {
  background: #52C41A;
}

.bar-segment.warning {
  background: #FAAD14;
}

.bar-segment.critical {
  background: #FF4D4F;
}

/* 柱状图悬停效果 */
.bars rect {
  cursor: pointer;
  transition: opacity 0.2s;
}

.bars rect:hover {
  opacity: 0.8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chart-svg {
    height: 240px;
  }
  
  .chart-stats {
    padding: 0 12px;
  }
  
  .stat-item {
    padding: 8px;
  }
  
  .area-name {
    font-size: 13px;
  }
  
  .total-count {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .chart-svg {
    height: 200px;
  }
  
  .stat-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
</style>
